<script setup>
import { ref } from 'vue'
import { useProductStore } from '../stores/counter'
import { useRouter } from 'vue-router'

const router = useRouter()

const { addList } = useProductStore()

const name = ref('')
const price = ref('')

const submit =()=>{
  if(name.value && price.value){
    const item ={
      "name":name.value,"price":price.value
    }
    console.log(item)
    addList(item)
    name.value = ''
    price.value = ''

    router.push('/lists')
  }

}



</script>

<template>
  <div class="box">
    商品名称:<input type="text" v-model="name" />
    <br />
    售价:<input type="text" v-model="price" />
    <br />
    <button @click="submit">提交</button>
  </div>
</template>

<style scoped>
  .box {
  margin: 10px auto;
  padding: 20px;
  width: 300px;
  border:1px solid black;
  text-align: center;
  justify-items: center;
  background-color: #f5f5f5;
  font-size: 16px;
  line-height: 2em;
}

.box button{
  margin-top:20px;
  padding: 0 10px;
  border: 1px solid black;
  border-radius: 5px;
}

</style>
